<template>
  <div class="home">
    <p class="title">推荐歌单</p>
    <van-row type="flex" justify="space-between">
      <van-col span="8" v-for="obj in recommendArr" :key="obj.id">
        <van-image width="100%" fit="cover" :src="obj.picUrl" />
        <p class="song_name">{{ obj.name }}</p>
      </van-col>
    </van-row>
    <p class="title">最新音乐</p>
    <van-cell v-for="item in newMusicArr" :key="item.id">
      <SongItem
        :name="item.name"
        :artistsName="item.song.artists[0].name"
        :albumName="item.song.album.name"
      ></SongItem>
    </van-cell>
  </div>
</template>

<script>
import { recommendAPI, newMusicAI } from "@/api/Home"
import SongItem from '@/components/SongItem'
export default {
  data () {
    return {
      recommendArr: [], // 推荐歌单
      newMusicArr: [] // 新音乐列表
    }
  },
  methods: {
    async getRecommendList () {
      const res = await recommendAPI({
        limit: 6,
      })
      this.recommendArr = res.data.result
    },
    async getNewMusicList () {
      const res = await newMusicAI({
        limit: 10
      })
      this.newMusicArr = res.data.result
    }
  },
  created () {
    this.getRecommendList()
    this.getNewMusicList()
  },
  components: {
    SongItem
  },
};
</script>

<style scoped>
/* .home /deep/ .van-image__img {
  border: 1px solid red;
} */
.title {
  padding: 0.266667rem 0.24rem;
  margin: 0 0 0.24rem 0;
  background-color: #eee;
  color: #333;
  font-size: 15px;
}
.song_name {
  font-size: 0.346667rem;
  padding: 0 0.08rem;
}
.van-col--8 {
  width: 32% !important;
}
.van-col {
  margin-bottom: 0.533333rem;
}
.van-cell {
  padding: 0.133333rem 0.266667rem;
  border-bottom: 1px solid #ccc;
}
</style>